<template>
  <div class="container">
    <topTitle :titleText="titleText"></topTitle>
    <div class="mainConBox">
      <div class="filterBox">
        <el-row class="searchInputWidth">
          <el-form :inline="true" :model="filterField">
            <el-col :lg="8" :xl="6">
              <el-form-item label="项目名称" class="row-padding-bottom">
                <el-input
                  v-model="filterField.projectName"
                  placeholder="请输入项目名称"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="区域" class="row-padding-bottom">
                <el-cascader
                  ref="manageArea"
                  v-model="areaId"
                  :options="areasOptions"
                  @change="getAreaId"
                  clearable
                  filterable
                  :props="{ checkStrictly: true }"
                  placeholder="请选择区域"
                ></el-cascader>
              </el-form-item>
            </el-col>
            <template v-if="advanced">
              <el-col :lg="8" :xl="6">
                <el-form-item label="行业" class="row-padding-bottom">
                  <el-select
                    class="selectWidth"
                    v-model="filterField.industryId"
                    filterable
                    placeholder="请选择行业"
                    clearable
                  >
                    <el-option
                      v-for="item in industryOptions"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item label="项目状态" class="row-padding-bottom">
                  <el-select
                    v-model="filterField.projectStatus"
                    class="baseSearchItem"
                    placeholder="请选择开工状态"
                    clearable
                    filterable
                  >
                    <el-option
                      v-for="item in statusOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item label="发薪年月" class="row-padding-bottom">
                  <el-date-picker
                    v-model="date"
                    type="month"
                    value-format="yyyy-MM"
                    placeholder="选择月"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item label="工资表状态" class="row-padding-bottom">
                  <el-select
                    class="selectWidth"
                    v-model="filterField.salaryStatus"
                    filterable
                    placeholder="请选择"
                    clearable
                  >
                    <el-option
                      v-for="item in salaryStateOptions"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item label="代发方式" class="row-padding-bottom">
                  <el-select
                    class="selectWidth"
                    v-model="filterField.sendType"
                    filterable
                    placeholder="请选择"
                    clearable
                  >
                    <el-option
                      v-for="item in sendTypeList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item label="开户银行" class="row-padding-bottom">
                  <el-select
                    class="selectWidth"
                    v-model="filterField.bankId"
                    filterable
                    placeholder="请选择开户银行"
                    clearable
                  >
                    <el-option
                      v-for="item in bankOptions"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item label="专户是否签约" class="row-padding-bottom">
                  <el-select
                    class="selectWidth"
                    v-model="filterField.signed"
                    filterable
                    placeholder="请选择"
                    clearable
                  >
                    <el-option value="1" label="已签约"></el-option>
                    <el-option value="0" label="未签约"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item label="代发到账记录" class="row-padding-bottom">
                  <el-select
                    class="selectWidth"
                    v-model="filterField.isRecord"
                    filterable
                    placeholder="请选择"
                    clearable
                  >
                    <el-option value="1" label="有"></el-option>
                    <el-option value="0" label="无"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </template>
            <el-col :lg="8" :xl="6">
              <el-form-item class="searchBut">
                <a
                  @click="toggleAdvanced"
                  style="margin-left: 40px; color: #409eff; cursor: pointer"
                  class="btnColor"
                >
                  {{ advanced ? '收起' : '展开' }}
                  <i
                    :class="
                      advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
                    "
                  ></i>
                </a>
                <el-button
                  type="primary"
                  icon="icon iconfont iconchazhao1"
                  @click="searchList"
                  class="searchBtn"
                >
                  <span>搜索</span>
                </el-button>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <div class="proDetailsListBox">
        <div class="colSetupBottom">
          <colSetup
            :tableColList="colSetupTableCol"
            @getSelectMenuId="getSelectMenuId"
            :mark="mark"
          ></colSetup>
          <el-button
            class="commonBut saveBtn funComBut"
            icon="icon iconfont icondaochu"
            @click="getExportList"
          >
            <span class="opetareText">导出报表</span>
          </el-button>
        </div>
        <!-- 表格 -->
        <el-table
          :data="tableList"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          v-loading="loading"
          style="border: 1px solid #dfe6ec"
          stripe
          ref="table"
          highlight-current-row
          @sort-change="sortChange"
          :max-height="tableHeight"
        >
          <el-table-column
            :min-width="item.prop === 'projectName' ? 230 : 200"
            :label="item.label"
            :property="item.prop"
            v-for="item in headerList"
            :key="item.id"
            :sortable="
              [
                'salaryCreateTime',
                'shouldPay',
                'bankActPay',
                'archiveDate',
                'shouldPayTotal',
                'total',
                'bankActPayTotal',
              ].includes(item.prop)
                ? 'custom'
                : false
            "
            default-expand-all
            :fixed="item.prop === 'projectName'"
            v-if="item.isShow"
            :formatter="formatTd"
          >
            <template slot-scope="scope">
              <div v-if="item.prop == 'projectName'">
                <copyText
                  :tableIndex="scope.$index"
                  :copyTextName="scope.row[scope.column.property]"
                  :columnName="'projectName'"
                ></copyText>
              </div>
              <div v-else>
                <span>{{
                  scope.row[scope.column.property] !== 0
                    ? scope.row[scope.column.property] || '--'
                    : 0
                }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            fixed="right"
            width="160px"
            v-if="filterList.length"
          >
            <template slot-scope="scope">
              <el-link type="primary" @click="seeOrderRecord(scope.row)"
                >订单号请求记录</el-link
              >
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关数据"></emptyTable>
          </div>
        </el-table>
        <!-- 分页 -->
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
          style="height: 52px"
        ></Pagination>
      </div>
    </div>
    <export-salary-table-dialog
      :showTaskProp="showTask"
      @callback="handleCloseArea"
      :childData="requestInfo"
    />
  </div>
</template>
<script>
import exportExcel from '@/components/publicCom/exportExcel'
import common from '../../kits/common'
import { mapActions, mapState } from 'vuex'
import ExportSalaryTableDialog from './exportSalaryTableDialog.vue'
export default {
  name: 'exportSalaryTable',
  components: {
    exportExcel,
    ExportSalaryTableDialog,
  },
  data() {
    return {
      tableHeight: null,
      titleText: '工资表导出',
      showExcel: false,
      headerList: [], //列表头部数据
      tableList: [], //列表数据
      date: '',
      filterField: {
        projectName: '',
        areaId: '',
        industryId: '',
        projectStatus: '',
        year: '',
        month: '',
        salaryStatus: '',
        sendType: '',
        bankId: '',
        signed: '',
        isRecord: '',
      },
      loading: true,
      isShow: false, //列表加载
      requestUrl: 'api-s/cs/salarystats/base/salaryexportlist',
      colSetupTableCol: [], //列设置数据
      areaId: '', //区域
      mark: 'projectDetailReport',
      salaryStateOptions: [], //工资表状态
      bankOptions: [],
      sendTypeList: [], //代发方式列表
      exportTableCol: [], //导出报表数据
      colSetupTableTotle: [],
      isShowDialog: false,
      isShowExcel: false,
      showTask: false,
      requestInfo: '',
      advanced: false,
    }
  },
  watch: {
    date(val) {
      if (val) {
        let arr = val.split('-')
        this.filterField.year = arr[0]
        this.filterField.month = arr[1] * 1
      } else {
        this.filterField.year = ''
        this.filterField.month = ''
      }
    },
  },
  computed: {
    ...mapState(['statusOptions', 'areasOptions', 'industryOptions']),
    filterList: function () {
      return this.headerList.filter((item) => {
        return item.isShow
      })
    },
  },
  created() {
    this.getHeaderData('0') //表头数据
    this.getHeaderData('1') //列设置数据
    this.getStatus({})
    this.getAreas({ areaId: this.$store.state.areaInfoArr.areaId })
    this.getIndustry({})
    this.getSalaryState()
    this.getBank()
    this.getSalarySendType()
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  mounted() {
    // if(this.$route.query.areaId){
    //     this.areaId = this.$route.query.areaId
    //     this.filterField.areaId = this.$route.query.areaId
    this.$refs.pagination.getTableListData()
    // }
    this.$nextTick(function () {
      this.tableHeight = window.innerHeight - 300
      // 监听窗口大小变化
      let self = this
      window.onresize = function () {
        self.tableHeight = window.innerHeight - 300
      }
    })
  },
  methods: {
    ...mapActions(['getStatus', 'getAreas', 'getIndustry']),
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    getTableList(data) {
      var that = this
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    toExportExcel() {
      this.isShowDialog = true
      this.isShowExcel = true
    },
    hiddenDialog(val) {
      this.isShowDialog = false
      this.isShowExcel = false
    },
    searchList() {
      var that = this
      that.$nextTick(function () {
        that.$refs.pagination.getTableListData()
      })
    },
    getSelectMenuId(val, newVal) {
      this.headerList = val
      this.$nextTick(() => {
        this.$refs.table.doLayout()
      })
    },
    // 获取列表头部数据
    getHeaderData(complex) {
      this.axios({
        method: 'post',
        url:
          '/api-s/dimension/head?type=' +
          'SALARY_EXPORT' +
          '&complex=' +
          complex,
      })
        .then((res) => {
          if (complex == '0') {
            this.headerList = res.data.result
            this.$nextTick(() => {
              this.$refs.table.doLayout()
            })
          } else {
            var result = res.data.result
            // this.colSetupTableTotle = JSON.parse(JSON.stringify(result));
            //项目名称、区域、行业禁止筛选
            for (let i = 0, len = result.length; i < len; i++) {
              for (
                let j = 0, childLen = result[i].children.length;
                j < childLen;
                j++
              ) {
                var childrenData = result[i].children[j]
                if (
                  childrenData.prop == 'projectName' ||
                  childrenData.prop == 'industryName' ||
                  childrenData.prop == 'countyName' ||
                  childrenData.prop == 'townName'
                ) {
                  childrenData.disabled = true
                }
              }
            }
            this.colSetupTableCol = JSON.parse(JSON.stringify(result)) //区别列设置和表格导出表头数据共用
            this.exportTableCol = result
          }
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '获取项目表头失败',
            type: 'error',
          })
        })
    },
    //获取选中的区域最后一级id
    getAreaId() {
      var areaId = this.areaId[this.areaId.length - 1]
      this.filterField.areaId = areaId
    },

    // 导出报表
    getExportList(val) {
      var fieldArr = []
      for (var i = 0; i < this.headerList.length; i++) {
        if (this.headerList[i].isShow == true) {
          fieldArr.push(this.headerList[i].prop)
        }
      }
      fieldArr = fieldArr.join(',')
      const vm = this
      if (this.tableList.length > 0) {
        window.location.href =
          common.commonApi +
          'api-s/cs/salarystats/base/salaryexport?projectName=' +
          encodeURIComponent(vm.filterField.projectName) +
          '&areaId=' +
          vm.filterField.areaId +
          '&industryId=' +
          vm.filterField.industryId +
          '&projectStatus=' +
          vm.filterField.projectStatus +
          '&year=' +
          vm.filterField.year +
          '&month=' +
          vm.filterField.month +
          '&salaryStatus=' +
          vm.filterField.salaryStatus +
          '&sendType=' +
          vm.filterField.sendType +
          '&bankId=' +
          vm.filterField.bankId +
          '&signed=' +
          vm.filterField.signed +
          '&isRecord=' +
          vm.filterField.isRecord +
          '&sort=' +
          vm.filterField.sort +
          '&sortField=' +
          vm.filterField.sortField +
          '&field=' +
          fieldArr +
          '&access_token=' +
          localStorage.getItem('access_token')
      } else {
        this.$message({
          type: 'error',
          message: '无数据导出',
        })
      }
    },
    /**
     * @name: 查看订单号请求记录
     * @param {obj}
     */
    seeOrderRecord(item) {
      if (item.sequenceCode) {
        this.showTask = true
        this.requestInfo = item.sequenceCode
      } else {
        this.$alert('可能是从旧系统迁移的工资表，无订单号', {
          confirmButtonText: '确定',
          callback: (action) => {},
        })
      }
    },
    handleCloseArea(val) {
      this.showTask = false
      if (val.success) {
        this.requestInfo = ''
      }
    },
    /**
     * @name: 获取工资表状态
     * @param {*}
     */
    getSalaryState() {
      this.axios({
        method: 'post',
        url: 'api-su/salary/expand/statuslist',
      })
        .then((response) => {
          this.salaryStateOptions = response.data
        })
        .catch((error) => {
          this.$message.error('数据获取失败')
        })
    },
    getBank() {
      var data = {
        type: 'BANK_TYPE',
      }
      this.axios({
        method: 'post',
        url: 'api-bs/base/dicitem/findbytype',
        data: data,
      }).then((response) => {
        this.bankOptions = []
        if (this.bankId) {
          for (let i = 0; i < response.data.result.length; i++) {
            let bank = response.data.result[i]
            if (this.bankId == bank.code) {
              this.bankOptions.push(bank)
            }
          }
        } else {
          this.bankOptions = response.data.result
        }
      })
    },
    getSalarySendType() {
      this.axios.get('api-su/cs/salary/expand/salarysendtype').then((res) => {
        if (!res.data.hasError) {
          this.sendTypeList = res.data.result
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
.container {
  .filterBox {
    background: #fff;
    padding: 24px 24px 0 24px;
  }
  .mainConBox {
    position: absolute;
    top: 50px;
    left: 0px;
    right: 0px;
    bottom: 24px;
    // overflow-y: auto;
    background-color: #fff;
    .baseSearch {
      position: relative;
      padding-left: 102px;
      &Title {
        position: absolute;
        top: 0;
        left: 0;
        height: 36px;
        line-height: 36px;
        width: 96px;
        text-align: right;
        display: inline-block;
        font-size: 14px;
        color: #606266;
      }
      &Box {
        margin-left: 10px;
      }
    }

    .proDetailsListBox {
      padding: 24px;
      background: #fff;
      border-top: 10px solid #f5f7fa;
      .colSetupBottom {
        margin-bottom: 24px;
        float: left;
        .colSetupBtn {
          float: left;
          margin-right: 20px;
        }
        /deep/ button.el-button.commonBut.saveBtn.funComBut.el-button--default {
          float: right;
        }
      }
    }
  }

  .loadData/deep/ .el-dialog__header {
    border-bottom: none;
    text-align: center;
  }
  .searchInputWidth .el-input__inner {
    width: 280px;
  }
  /deep/.rangeWidth .el-input__inner {
    width: 70px;
  }
}
@import '../../../static/css/filterArea.less';
</style>
